<template>
	<view class="steps">
		<view class="step-item" v-for="item,index in stepList" :key="index" :style="{'margin-right':index<=current?'80rpx':'0rpx'}">
			<view class="item-icon" :class="{'success':index<=current}">
				<i class="iconfont" :class="`icon-${item.icon}`"/>
				<view class="point-list">
					<view class="point" :style="{'animation-delay':`.${pindex}s`}"  :class="{'success':index<current,'current':index==current}" v-for="pitem,pindex in 6" :key="`pitem`+pitem" v-if="index<stepList.length-1"/>
				</view>
			</view>
			<view class="item-text">
				{{item.value}}
			</view>

		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps } from 'vue';
	import type { IStep } from './types';

	interface IProps {
		stepList : IStep[],
		current:number,
	}

	const props = withDefaults(defineProps<IProps>(), {
		stepList: () => [],
		current:0,
	})
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>